<script lang="ts" setup>

import { computed, ref,onMounted } from 'vue'

import {getGoodsClassify,addSuit,getSuit,editSuit,changeSuitStatus,deleteSuit,} from '../../api/taozhuang/tzfl'


//获取数据
let data=ref([])
onMounted(() => {
  get()
})

//封装数据
function get(){
  getGoodsClassify().then((res)=>{
    console.log(res);
    
    data.value=Object.values(res)    
  })
}











let dialogVisible = ref(false)
let useFrom=ref({
  title:'',
  status:1,
  sort:'',
  ids:''
})
let flag = ref(false)


//回显功能
const handleEdit = (index: number, row: any) => {
            flag.value=true
        dialogVisible.value=true
        getSuit(row.id).then((res)=>{
          useFrom.value=res
          
        })
}


//添加弹框
let add=()=>{
 
  if(flag.value==true){
  //  修改功能
  editSuit(useFrom.value).then((res)=>{
    get()
    dialogVisible.value=false
    useFrom.value={
      title:'',
      status:1,
      sort:'',
      ids:''  
    }
  })
    
  }else{
    //添加功能
    addSuit(useFrom.value).then((res)=>{
      get()
      dialogVisible.value=false
      useFrom.value={
        title:'',
        status:1,
        sort:'',
        ids:''
      }
    })
  }
}

//状态改变
let changeSuitStatu=(id:number,status:any)=>{
  changeSuitStatus(status.id,status).then((res)=>{
    get()
  })
  
}

//删除功能
const handleDelete = (index: number, row: any) => {
  deleteSuit(row.id).then((res)=>{
    get()
  })
}


</script>

<template>
            <!-- //添加商品 -->
        <div>
                <el-button @click="dialogVisible = true"> 添加商品</el-button>

        </div>


        <!-- 表格 -->
            <el-table :data="data" style="width: 100%">
        <el-table-column label="id" prop="id" />
        <el-table-column label="商品名称" prop="title" />
        <el-table-column label="状态" prop="qiyong" #default="scope">
            <el-switch  v-model="scope.row.status"  :active-value="1" :inactive-value="2" @change="changeSuitStatu(scope.$index, scope.row)" />
            </el-table-column>
        <el-table-column align="right">
       
        <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"

            >修改</el-button
            >
            <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
            >
        </template>
        </el-table-column>
            </el-table>

                  <!-- 添加弹框 -->
  <div>
    <el-dialog v-model="dialogVisible"  :title="flag?'修改商品分类':'添加商品分类'"width="800">
      <span>
        <!-- 名称 -->
        <div>
          广告标题：<el-input
            placeholder="请输入标题"
            style="width: 650px"
            v-model="useFrom.title"
          />
        </div>
     
        <!-- 排序 -->
        <div>
          广告排序：<el-input
            placeholder="请输入排序号"
            style="width: 650px"
            v-model="useFrom.sort"
          />
        </div>
        <div>
          状态： <el-switch  v-model="useFrom.status"  :active-value="1" :inactive-value="2" />
        </div>
      
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="add">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>



     


</template>

<style lang="less" scoped>
</style>
